<!--  -->
<template>
  <div class=''>
    <el-form ref="formInline" :inline="true" size="small" :model="formInline" class="demo-form-inline">
      <el-form-item label="审批人" prop="user">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          class="queryButton"
          icon="el-icon-search">查询</el-button>
        <el-button
          class="resetButton"
          @click="resetQuery('formInline')"
          icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <el-form>
      <el-button
        type="primary"
        plain
        class="queryButton"
        icon="el-icon-plus">新增</el-button>
      <el-button
        type="warning"
        plain
        class="queryButton"
        icon="el-icon-download">导出</el-button>
    </el-form>
    <el-table
      :data="tableData"
      :header-cell-style="{ background:'#f8f8f9',color:'#515a6e'}"
      size="mini"
      style="width: 100%; margin-top: 5px;">
      <el-table-column
        prop="date"
        label="日期"
        width="90">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="90">
      </el-table-column>
      <el-table-column
        prop="address"
        width="200"
        :show-overflow-tooltip="true"
        label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleForceLogout(scope.row)"
          >强退</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="pagination_container"
      :total="paginationForOut.total"
      :page-sizes="[10, 20, 50, 100]"
      :page.sync="paginationForOut.page"
      :limit.sync="paginationForOut.pageSize"
      @pagination="changeStyRecord"
    />
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        paginationForOut: {
          page: 1,
          pageSize: 10,
          total: 20
        },
        formInline: {
          user: '',
          region: ''
        },
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeStyRecord(){},
    onSubmit() {
      // console.log('submit!');
    },
    handleForceLogout(){},
    resetQuery(fromName) {
      // this.resetForm(fromName)
      this.$refs[fromName].resetFields();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
</style>
